<template>
    <div class='cmt-box'>
        <h3>发表评论</h3>
        <hr>
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入" maxlength="120" v-model='message'></textarea>
        <mt-button type="primary" size='large' @click='postComment'>发表评论</mt-button>
        <div class="cmt-list" >
            <div class="cmt-item" v-for="(item,index) in commentsList" :key='index'>
                <div class="cmt-title">
                    第{{index+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;时间:{{item.add_time | dateForm}}
                </div>
                <div class="cmt-body">
                    {{item.content | commentForm}}
                </div>
            </div>            
        </div>
        <mt-button type="danger" size='large' plain @click='getMore'>加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui';
export default {
    data(){
        return {
            id:this.$route.params.id,
            pageIndex:1,//默认加载第一页
            commentsList:[],
            message:''
        }
    },
    props:["id1"],
    created(){
        this.getComment();
    },
    methods:{
        getComment(){
            this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+'?pageindex='+this.pageIndex).then(result => {
                if(result.body.status === 0){
                    //防止新的数据被覆盖，我们点击加载更多之后，数据是和之前的拼接在一起
                    this.commentsList = this.commentsList.concat(result.body.message);
                }else{
                    Toast('获取评论列表失败');
                }
            })
        },
        //获取更多的评论
        getMore(){
            this.pageIndex++;
            this.getComment();
        },
        //发表评论
        //params: url,
        //params: 数据对象
        postComment(){
            //check
            if(this.message.trim().length == 0){
                return Toast('你什么都没有说')
            }
            this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.id,{content:this.message.trim()}).then(function(result){
                if(result.body.status === 0){
                    Toast('发表成功');
                    //手动把当前的推到最上面
                    var cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.message.trim()}
                    this.commentsList.unshift(cmt);
                    this.message = '';
                }else{
                    Toast('发表失败');
                }
            });
            
    }
}}
</script>
<style lang="scss" scoped>
.cmt-box{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height:85px;
        margin: 0px;
    }
    .cmt-list{
        margin: 5px auto;
        .cmt-item{
            .cmt-title{
                font-size: 12px;
                background-color: #cccccc;
                line-height:30px;
            }
            .cmt-body{
                font-size: 13px;
                line-height:35px;
                text-indent: 2em;
            }
        }
    }
}
</style>